<template>
    <a-modal
      :bodyStyle="bodyStyle"
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form layout='vertical' :form="form">
        <a-form-item>
          <a-checkbox
            :checked="onlySearch"
            @change="onChangeOnlySearch"
            v-decorator="[
              'onlySearch',
              {
                rules: [{ required: false }],
              }
            ]"
          >只能以图搜索</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-tree-select
            :treeData="treeData"
            :value="classifyIds"
            @change="onChange"
            treeCheckable
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :showCheckedStrategy="SHOW_PARENT"
            searchPlaceholder="Please select"
          />
        </a-form-item>
        <a-form-item>
          <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload" multiple>
            <a-button> <a-icon type="upload" /> Select File </a-button>
          </a-upload>
          <span>注意文件名规则：文件名+下划线+标签，如：Z00001_新中式 荷花.jpg</span>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script>
// import api from '@/core/Api'
import serv from './ImageStoreService'
import Vue from 'vue'
import { TreeSelect, Form, Upload, Button, Checkbox, Modal } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
Vue.component(Form.name, Form)
Vue.component(Form.Item.name, Form.Item)
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)
Vue.component(Checkbox.name, Checkbox)
Vue.component(TreeSelect.name, TreeSelect)
Vue.component(Modal.name, Modal)
export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.productTypes = this.dictionary().PRODUCT_TYPE
  },
  data () {
    return {
      bodyStyle: { height: 400 },
      productTypes: [],
      loading: false,
      imageUrl: '',
      onlySearch: false,

      fileList: [],
      files: [],

      classifyIds: [],
      treeData: [],
      SHOW_PARENT
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    visible: function (nvalue) {
      // 初始加载树
      !nvalue || this.getTree()

      this.classifyIds = []
      this.fileList = []
      this.files = []
    }
  },
  methods: {
    handleOk (e) {
      let i = 0
      for (let file of this.fileList) {
        const name = this.$api.getName(file.name)
        let index = name.indexOf('_')
        if (index === -1) {
          index = name.indexOf('＿')
        }
        const photoImageKey = `batchSaveObj[${i}].photoImage`
        const nameKey = `batchSaveObj[${i}].name`
        const tagKey = `batchSaveObj[${i}].tag`
        const obj = {}
        if (index > -1) {
          obj[photoImageKey] = file
          obj[nameKey] = name.substring(0, index)
          obj[tagKey] = name.substring(index + 1)
        } else {
          obj[photoImageKey] = file
          obj[nameKey] = name
        }
        this.files = {...this.files, ...obj}
        i++
      }
      this.$emit('ok', this.classifyIds, this.files)
    },
    handleCancel (e) {
      this.$emit('cancel')
    },
    onChange (value) {
      this.classifyIds = value
    },
    onChangeOnlySearch (e) {
      this.onlySearch = e.target.checked
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload (file) {
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('图不能大于 3MB!')
        return false
      }
      this.fileList = [...this.fileList, file]
      return false
    },
    onChangeUrl (e) {
      console.log(11212)
    },
    async getTree () {
      this.treeData = await serv.getTree()
    },
    onSelect (selectedKeys, info) {
      console.log('selected', selectedKeys, info)
    },
    onCheck (checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    async getImageStorageAndClassifyList (id) {
      const ids = []
      for (let item of await serv.getImageStorageAndClassifyList(id)) {
        console.log(item)
        ids.push(item.imageStorageClassifyId)
      }
      this.classifyIds = ids
    }
  }
}
</script>

<style scoped>
img {
  max-width: 100%;
}
</style>
